<template>
  <div class="search-list">
    <loading-comp v-if="isShow"></loading-comp>
    <ul class="list" v-if="!isShow">
      <li v-for="(i, index) in msg" :key="index">
        <router-link :to="`/detail?id=${i.id}&isLogin=${isLogin}`">
          <div class="left"><img :src="i.vertical_cover" /></div>
          <div class="right">
            <h4 v-html="i.title.replaceAll('em', 'span')"></h4>
            <p v-html="i.author_name[0]"></p>
            <p>{{ i.styles[0] }}</p>
            <p>{{ i.is_finish ? "已完结" : "连载中" }}</p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import LoadingComp from "@/components/LoadingComp.vue";
export default {
  name: "SearchEnd",
  data() {
    return {
      isLogin: this.$route.query.isLogin,
    };
  },
  props: ["msg", "isShow"],
  components: {
    LoadingComp,
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";

.list {
  border-top: 1px solid #ccc;
  li {
    margin: 3vw 0;
    height: 25vw;
    a {
      // display: flex;
      // justify-content: space-between;
      height: 100%;
      width: 100%;
      .left {
        height: 100%;
        width: 18.6667vw;
        float: left;
        img {
          height: 100%;
          width: 100%;
          border-radius: 1vw;
        }
      }
      .right {
        width: 69vw;
        margin-left: 22vw;
        h4 {
          width: 100%;
          font-weight: normal;
          margin: 1.5vw 0 4vw;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      p {
        color: #aaa;
        font-size: 3.2vw;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>